<template>
  <div class="addAddress">
    <my-header :title="title" :showLeft="true" />
    <div class="address-wrap" v-if="!showSearch">
      <form action="">
        <label for="contact_person" class="contact">
          <span>姓名</span>
          <input id="contact_person" placeholder="姓名" :tags="sex" v-model="addressInfo.name" />
        </label>

        <div class="tags-wrap">
          <my-tags v-if="tags" :checkedTags="addressInfo.sex" :tagsData="sex" @checkTags="checkSex"></my-tags>
        </div>

        <label for="phone">
          <span>手机号</span>
          <input type="text" placeholder="请输入手机号" v-model="addressInfo.phone">
        </label>

        <label for="address" @click="showSearch=true">
          <span>住址</span>
          <input id="address" placeholder="小区/写字楼/学校等" label="地址" icon="angle-right" @click="showSearch = true" v-model="addressInfo.address" />
        </label>

        <label for="house_number">
          <span>门牌号</span>
          <textarea id="house_number" placeholder="10号楼5单元404" label="门牌号" textarea="123" icon="edit" row="2" maxlength="100" v-model="addressInfo.bottom" />
        </label>
        <my-tags :tagsData="tags" label="标签" @checkTags="clickTags" :checkedTags="addressInfo.tag" />

        <div class="sure" @click="sure">
          <button class="sureSubmit" type="button">确定</button>
        </div>
      </form>
    </div>
    <!-- 搜索 -->
    <address-search :isShow="showSearch" @hiddenModel="showSearch = false" :searchInfo="addressInfo" @update="update" />
  </div>
</template>

<script>
import MyHeader from '@/components/Header/Header'
import MyTags from '@/components/Order/Tags'
import AddressSearch from '@/components/Order/AddressSearch'

import { Toast } from 'mint-ui'

export default {
  name: 'AddAddress',
  components: {
    MyHeader,
    MyTags,
    AddressSearch
  },
  data() {
    return {
      title: '',
      tags: ['家', '学校', '公司'],
      sex: ['先生', '女士'],
      tagsInfo: {},
      showSearch: false,
      addressInfo: {
        // name: '',
        // sex: '',
        // phone: null,
        // address: '',
        // bottom: '',
        // tag: ''
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (to.params.addressInfo) {
        vm.addressInfo = to.params.addressInfo
      }
      vm.title = to.params.title
      // vm.addressInfo.tag = to.params.tag
      if (to.params.tag) {
        vm.addressInfo.tag = to.params.tag
      }
    })
  },
  methods: {
    clickTags(item) {
      console.log(item)
      this.addressInfo.tag = item
    },
    checkSex(item) {
      this.addressInfo.sex = item
    },
    sure() {
      if (!this.addressInfo.phone) {
        this.showToast('请输入手机号')
      }
      if (!this.addressInfo.name) {
        this.showToast('请输入姓名')
      }
      if (!this.addressInfo.bottom) {
        this.showToast('请输入门牌号')
      }
      // 地址
      if (!this.addressInfo.address) {
        this.showToast('请输入地址')
      }
      // 存储数据
      if (this.title === '添加地址') {
        this.addAddress()
      }
      else {
        this.editorAddress()
      }
    },
    showToast(msg) {
      Toast({
        message: msg,
        position: 'middle',
        duration: 2000
      })
    },
    addAddress() {
      this.$http.post(`/api/user/add_address/${sessionStorage.getItem('ele_login')}`, this.addressInfo).then(res => {
        if (!this.$store.getters.userInfo) {
          this.$store.dispatch('setUserInfo', this.addressInfo)
        }
        this.$router.push('/myaddress')
      })
    },
    update(val) {
      this.addressInfo.address = val
    },
    editorAddress() {
      this.$http
        .post(
          `/api/user/edit_address/${sessionStorage.ele_login}/${this.addressInfo._id
          }`,
          this.addressInfo
        )
        .then(res => {
          this.$router.push({
            name: 'myAddress',
            params: {
              title: '添加地址',
              addressInfo: {
                name: '',
                sex: '',
                phone: '',
                address: '',
                bottom: '',
                tags: ''
              }
            }
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
.address-wrap {
  .tags-wrap {
    padding: 20px 0;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
  }
  form {
    background-color: #fff;
    label {
      display: flex;
      align-items: center;
      padding: 20px 10px;
      border-bottom: 1px solid #ccc;
      span {
        width: 50px;
        text-align: center;
      }
      input {
        flex: 1;
        outline: none;
        border: none;
        padding: 10px;
      }
      textarea {
        flex: 1;
        border: none;
        outline: none;
      }
    }
  }

  .sure {
    margin-top: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    .sureSubmit {
      width: 100%;
      height: 49px;
      line-height: 49px;
      border: none;
      outline: none;
      border: 1px solid #ccc;
      color: #333;
      background-color: skyblue;
      box-sizing: border-box;
    }
  }
}
</style>
